<script setup>
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute } from "vue-router";
import { inspectionTask } from "@/api/inspection/task-manage";
import {
  inspectionAudio,
  inspectionMap,
} from "@/api/inspection/resource-manage";
import { inspectionRoute } from "@/api/inspection/map-setting";
import inspectionImage from "@/assets/images/inspection/t_01.png";
import broadcastImage from "@/assets/images/inspection/t_02.png";
import TaskManageKonva from "./components/TaskManageKonva.vue";
import TaskTemplateDialog from "./components/TaskTemplateDialog.vue";

const route = useRoute();

// tabs状态
const tabsName = ref("taskTemplate");

// 任务模板数据
const taskTemplateData = ref([]);
async function getTaskTemplateData() {
  const { data } = await inspectionTask.read({ rid: route.query.id });
  taskTemplateData.value = data.list;
}
getTaskTemplateData();

// 任务模板弹窗状态
const taskTemplateStatus = ref(0);

// 任务模板弹窗
const taskTemplateDialogVisible = ref(false);
function openTaskTemplateDialog(status, item) {
  taskTemplateDialogVisible.value = true;
  taskTemplateStatus.value = status;
  if (status === 0) {
    taskTemplateFormData.value = { rid: route.query.id };
  } else {
    taskTemplateFormData.value = {
      id: item.id,
      name: item.name,
      type: item.type,
      rid: item.rid,
      mid: item.mid,
      tid: item.tid,
      time: item.time,
      startTime: item.startTime,
      endTime: item.endTime,
      condition: item.condition,
    };
  }
}

const taskTemplateFormData = ref();
function initFormData() {
  taskTemplateFormData.value = { rid: route.query.id };
}

// 删除任务模板
async function deleteTaskTemplate(id) {
  await ElMessageBox.confirm("确认继续操作吗", "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  });
  const { message } = await inspectionTask.delete(id);
  getTaskTemplateData();
  ElMessage({ type: "success", message });
}

// 激活任务模板
async function activeTaskTemplate(id) {
  await ElMessageBox.confirm("确认继续操作吗", "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  });
  const { message } = await inspectionTask.activation(id);
  getTaskTemplateData();
  tabsName.value = "activeTask";
  ElMessage({ type: "success", message });
}

// 预览任务模板
const konva = ref();
const visible = ref(false);
const audioUrl = ref("");
async function previewTaskTemplate(item) {
  if (item.type === 0) {
    // 解构查询音频url
    const {
      data: { list: audioList },
    } = await inspectionAudio.read();
    const { url } = audioList.find((element) => {
      return Number(item.tid) === element.id;
    });
    visible.value = true;
    audioUrl.value = url;
  } else if (item.type === 1) {
    // 解构查询地图url
    const {
      data: { list: mapList },
    } = await inspectionMap.read();
    const { url } = mapList.find((element) => {
      return item.mid === element.id;
    });
    // 解构查询路径raw
    const {
      data: { list: routeList },
    } = await inspectionRoute.read({ mid: item.mid });
    const { raw } = routeList.find((element) => {
      return Number(item.tid) === element.id;
    });
    await konva.value.initImage(url);
    konva.value.previewPath(JSON.parse(raw));
  }
}
</script>

<template>
  <div class="min-h-full w-full flex">
    <el-dialog v-model="visible" width="400px" :show-close="false">
      <audio class="h-9 w-full" :src="audioUrl" controls />
    </el-dialog>
    <!-- 任务模板弹窗 -->
    <TaskTemplateDialog
      v-model:visible="taskTemplateDialogVisible"
      :status="taskTemplateStatus"
      :form-data="taskTemplateFormData"
      @refresh-data="getTaskTemplateData"
      @init-form-data="initFormData"
    ></TaskTemplateDialog>
    <div class="min-h-full w-[280px] mr-4">
      <el-tabs
        v-model="tabsName"
        class="h-full bg-[#162331] border-0"
        type="border-card"
      >
        <el-tab-pane label="任务模板" name="taskTemplate">
          <el-button
            class="m-4 mb-2"
            size="large"
            type="primary"
            @click="openTaskTemplateDialog(0)"
          >
            添加任务模板
          </el-button>
          <template v-for="item in taskTemplateData" :key="item.id">
            <div
              v-if="item.activeStatus === 0"
              class="whitespace-nowrap overflow-hidden text-ellipsis h-16 px-4 select-none cursor-pointer flex justify-between items-center hover:bg-[#2e3946] text-white"
              @click="previewTaskTemplate(item)"
            >
              <div class="flex items-center text-base">
                <img :src="item.type ? inspectionImage : broadcastImage" />
                <span class="ml-3">{{ item.name }}</span>
              </div>
              <div class="grid grid-cols-2 gap-2">
                <el-button
                  type="primary"
                  link
                  @click.stop="openTaskTemplateDialog(1, item)"
                >
                  编辑
                </el-button>
                <el-button
                  type="success"
                  link
                  @click.stop="activeTaskTemplate(item.id)"
                >
                  激活
                </el-button>
                <el-button
                  type="warning"
                  link
                  @click.stop="openTaskTemplateDialog(2, item)"
                >
                  复制
                </el-button>
                <el-button
                  type="danger"
                  link
                  @click.stop="deleteTaskTemplate(item.id)"
                >
                  删除
                </el-button>
              </div>
            </div>
          </template>
          <div class="">
            <el-pagination
              background
              small
              layout="prev, pager, next"
              :pager-count="2"
              :total="1000"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="已激活任务" name="activeTask" class="overflow-auto">
          <template v-for="item in taskTemplateData" :key="item.id">
            <div
              v-if="item.activeStatus === 1"
              class="h-16 px-4 select-none cursor-pointer flex flex-col justify-center hover:bg-[#2e3946] text-white"
              @click="previewTaskTemplate(item)"
            >
              <div class="flex items-center justify-between w-full mb-1">
                <div class="flex items-center text-base">
                  <img :src="item.type ? inspectionImage : broadcastImage" />
                  <span
                    class="ml-3 whitespace-nowrap overflow-hidden text-ellipsis"
                  >
                    {{ item.name }}
                  </span>
                </div>
                <div class="flex items-center text-sm">
                  <el-button
                    type="warning"
                    link
                    @click.stop="openTaskTemplateDialog(2, item)"
                  >
                    复制
                  </el-button>
                  <el-button
                    type="danger"
                    link
                    @click.stop="deleteTaskTemplate(item.id)"
                  >
                    删除
                  </el-button>
                </div>
              </div>
              <div
                class="flex items-center justify-between w-full text-xs text-gray-500"
              >
                <span>{{ item.startTime }}</span>
                <span>{{ item.time }}次</span>
              </div>
            </div>
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
    <TaskManageKonva ref="konva"></TaskManageKonva>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-tabs__nav-wrap .is-top) {
  height: 56px;
  display: flex;
  align-items: center;
}

:deep(.el-tabs--border-card),
:deep(.el-tabs__nav-scroll) {
  background: #162331;
  border: 0;
}

:deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active) {
  border: 0;
  border-bottom: 4px solid #24a0ff;
  background: #162331;
}

:deep(.el-tabs__item) {
  padding: 0 !important;
  margin: 0 20px !important;
  color: #ffffff !important;
  font-size: 18px;
  font-weight: 900;
}

:deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item) {
  border: 0;
  user-select: none;
}

:deep(.el-tabs__content) {
  padding: 0;
}

.el-button + .el-button {
  margin-left: 0;
}
</style>
